let provinceData = [
    {
        name: '北京市',
        cities: ['东城区', '西市区', '宣武区', '朝阳区', '海淀区', '崇文区', '通州区']
    },
    {
        name: '上海市',
        cities: ['市辖区', '黄浦区', '徐汇区', '长宁区', '静安区', '虹口区']
    },
    {
        name: '广东省',
        cities: ['广西市', '深圳市', '珠海市', '汕头市', '韶关市', '佛山市', '江门市', '湛江市', '茂名市', '肇庆市', '惠州市', '梅州市', '汕尾市', '河源市', '阳江市', '清远市', '东莞市', '中山市', '潮州市', '揭阳市', '云浮市']
    },
    // 其他省份
];

let countryArr = ['中国', '美国', '韩国', '日本', '英国'];
let json = {
    user: '2807942996@qq.com',
    name: '牛牛',
    perIntr: '超级管理员',
    address: '摆烂街道',
    phone1: '13340751958',

}
let confirmJson = {
    tel: {
        con: /^1[3-9]\d{9}$/,
        error: '您输入的电话号码有误'
    },
    pass: {
        con: /^(?=.*[A-Z])(?=.*[!@#$%&*])(?=.*\d).{8,12}$/,
        error: '密码必须包含大写字母数字和特殊符号'
    },
    name: {
        con: /^[\u4e00-\u9fa5]{2,6}$/,
        error: '请输入合法的中文名'
    },
    qq: {
        con: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
        error: '请输入正确的qq号'
    }
}
let oUser = document.querySelector('.user');
let oeditBtn = document.querySelector('.editbtn');
let oName = document.querySelector('.name');
let oIntroduce = document.querySelector('.introduce');
let oAddress = document.querySelector('.address');
let oTel1 = document.querySelector('.gl_tel_inp1');
let oCountry = document.querySelector('.country');
let provSelect = document.querySelector('.gl_provinous_select1');
let citySelect = document.querySelector('.gl_provinous_select2');
let oSavebtn = document.querySelector('.save-btn');
let aSp1 = document.querySelector('.spn1');
let aSp2 = document.querySelector('.spn2');
let aSp3 = document.querySelector('.spn3');


let aEma = document.querySelector('.ema');
let aNickname = document.querySelector('.nickname');
let aPerintr = document.querySelector('.perintr');
let aEara = document.querySelector('.eara');
let aPero = document.querySelector('.pero');
let aTown = document.querySelector('.town');
let aStreetaddr = document.querySelector('.streetaddr');
let aTelphone = document.querySelector('.telphone');
let showImg1 = document.querySelector('.show-img1');
let oFile = document.querySelector('#file1');
let str1 = aEma.value;
oUser.value = json.user;
oName.value = json.name;
oIntroduce.value = json.perIntr;
oAddress.value = json.address;
oTel1.value = json.phone1;
// console.log(oUser.value)
function province() {

    //地区
    selectStr1 = '';
    for (let i = 0; i < countryArr.length; i++) {
        selectStr1 += `
        <option>${countryArr[i]}</option>
    `
    }
    oCountry.innerHTML = selectStr1;

    //省份
    selectStr2 = '';
    for (let i = 0; i < provinceData.length; i++) {
        selectStr2 += `
        <option>${provinceData[i].name}</option>
    `
    }
    provSelect.innerHTML = selectStr2;
    //市县
    function cityChange() {
        let provinceName = this.value;
        let cities = [];
        // 根据省份名称获取城市列表
        for (let i = 0; i < provinceData.length; i++) {
            if (provinceData[i].name === provinceName) {
                cities = provinceData[i].cities;
                break;
            }
        }
        // 清空城市下拉框
        citySelect.innerHTML = '';
        // 动态渲染城市下拉框
        for (var i = 0; i < cities.length; i++) {
            citySelect.innerHTML += `<option> ${cities[i]}</option>`;
        }

        citySelect.style.display = 'inline-block';
    }
    provSelect.addEventListener('change', cityChange);

    aPero.addEventListener('change',function(){
        let provinceName = this.value;
        let cities = [];
        // 根据省份名称获取城市列表
        for (let i = 0; i < provinceData.length; i++) {
            if (provinceData[i].name === provinceName) {
                cities = provinceData[i].cities;
                break;
            }
        }
        // 清空城市下拉框
        aTown.innerHTML = '';
        // 动态渲染城市下拉框
        for (var i = 0; i < cities.length; i++) {
            aTown.innerHTML += `<option> ${cities[i]}</option>`;
        }
        aTown.style.display = 'inline-block';
    });
    aPero.addEventListener('click', cityChange);
    oeditBtn.addEventListener('click', function () {
        aEara.innerHTML = oCountry.innerHTML;
        aPero.innerHTML = provSelect.innerHTML;
        aTown.innerHTML = citySelect.innerHTML;
    });
    oSavebtn.addEventListener('click', function () {
        oUser.value = aEma.value;
        oName.value = aNickname.value;
        oIntroduce.value = aPerintr.value;
        oAddress.value = aStreetaddr.value;
        oTel1.value = aTelphone.value;
        oCountry.value = aEara.value;
        provSelect.value = aPero.value;
        citySelect.value = aTown.value;
        console.log(oUser.value)
    });

}
province();
function regData() {
    aEma.addEventListener('blur', function () {
        let str1 = aEma.value.trim();
        if (str1 == '') {
            aSp1.innerText = '内容不能为空！'
            aSp1.style.color = 'red'
            return;
        }
        if (confirmJson.qq.con.test(str1) == false) {
            console.log(confirmJson.qq.con.test(str1));
            aEma.classList.add('err');
            aSp1.style.display = 'none'

            return;
        } else {
            aEma.classList.add('rig');
            aSp1.style.display = 'none';
            aEma.classList.remove('err');

        }
    });

    aNickname.addEventListener('blur', function () {
        let str2 = aNickname.value.trim();
        if (str2 == '') {
            aSp2.innerText = '内容不能为空！'
            aSp2.style.color = 'red'
            return;
        }
        if (confirmJson.name.con.test(str2) == false) {
            console.log(confirmJson.name.con.test(str1));
            aNickname.classList.add('err');
            aSp2.style.display = 'none'

            return;
        } else {
            aNickname.classList.add('rig');
            aSp2.style.display = 'none';
            aNickname.classList.remove('err');

        }
    });

    aTelphone.addEventListener('blur', function () {
        let str3 = aTelphone.value.trim();
        if (str3 == '') {
            aSp3.innerText = '内容不能为空！'
            aSp3.style.color = 'red'
            return;
        }
        if (confirmJson.tel.con.test(str3) == false) {
            console.log(confirmJson.tel.con.test(str3));
            aTelphone.classList.add('err');
            aSp3.style.display = 'none'
            return;
        } else {
            aTelphone.classList.add('rig');
            aSp3.style.display = 'none';
            aTelphone.classList.remove('err');

        }
    });


}
regData();

oFile.addEventListener('change', function () {
    let fileReader = new FileReader();
    fileReader.readAsDataURL(oFile.files[0]);

    fileReader.addEventListener('loadend', function (e) {
        console.log(e.target.result)
        showImg1.children[0].src = e.target.result;
        // showImg.style.display = 'block';
    });
    console.log(1);
});








